<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>练习 - 网页时钟</title>
	<style>
		* {
			box-sizing: border-box;
		}

		.clock {
			width: 600px;
			height: 600px;
			background: url(./images/clock.jpg) no-repeat;
			margin: 50px auto 0;
			position: relative;
		}

		.hh,
		.mm,
		.ss {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: url(./images/hour.png) no-repeat center;
		}

		.hh {
			transform: rotate(18deg);
		}

		.mm {
			background-image: url(./images/minute.png);
			transform: rotate(270deg);
		}

		.ss {
			background-image: url(./images/second.png);
			transform: rotate(0deg);
		}
	</style>
</head>

<body>
	<div class="clock">
		<div class="hh" id="h"></div>
		<div class="mm" id="m"></div>
		<div class="ss" id="s"></div>
	</div>
	<script>
		// 小时
		let hh = document.querySelector('.hh')
		// 分钟
		let mm = document.querySelector('.mm')
		// 秒
		let ss = document.querySelector('.ss')

		// 获取当前时间
		let myDate = new Date()
		// 获取小时
		let hhh = myDate.getHours()
		// 分钟
		let mmm = myDate.getMinutes()
		// 秒数
		let sss = myDate.getSeconds()

		/* 秒针 1秒走6度
		分钟 60秒（秒钟360度）走 6度
		时针 每隔12分钟，让时针走6度 */

		let deg = sss * 6
		let m = mmm * 6
		let h = hhh * 30

		h = h + parseInt(mmm / 12) * 6

		ss.style.transform = `rotate(${deg}deg)`
		mm.style.transform = `rotate(${m}deg)`
		hh.style.transform = `rotate(${h}deg)`


		setInterval(function () {
			// 秒钟 每秒旋转6度 也就是时钟图的一秒
			deg += 6
			ss.style.transform = `rotate(${deg}deg)`
			// 每次秒针转了 360deg 的时候，分钟转 6deg
			if (deg % 360 === 0) {
				m += 6
				mm.style.transform = `rotate(${m}deg)`
				// 分钟走了12格(72deg)的时候，小时的时针才会走一格(6deg)
				if (m % 72 === 0) {
					h += 6
					hh.style.transform = `rotate(${h}deg)`
				}
			}
		}, 1000)
	</script>
</body>

</html>